<template>
	<page class="container" ref='container'>
		<!--<nav-header ></nav-header>-->
		<div class="list">
			<router-link v-for="item in classifyGoodsData" :to='"/GoodsDetail/" + item.goods_id' :key="item.goods_id">
				<dl class="item">
					<dt class="img-content">
						<img  v-lazy="item.goods_image"/>
					</dt>
					<dd class="goods-info">
						<span class="title">{{item.goods_name}}</span>
						<span class="brief">{{item.goods_jingle}}</span>
						<span class="price">{{item.goods_price}}元/{{item.units}}</span>
					</dd>
					<dd class="lable">

					</dd>
				</dl>
			</router-link>
		</div>
	</page>
</template>

<script>
	//	import header from "@/components/header/header"
	import { mapGetters, mapState, mapActions } from 'vuex';
	export default {
		name: 'goods-classify',
		data() {
			return {}
		},
		created() {
			var param = this.$route.params
			this.getClassifyGoodsDataAsyn(param);
		},
		computed: {
			...mapState(['classifyGoodsData'])
		},
		mounted() {
			console.log(this.$refs.container)
			//			this.$refs.container.addEventListener("scroll", function() {
			//			})
		},
		methods: {
			...mapActions(['getClassifyGoodsDataAsyn']),
			loadTop() {},
			loadBottom() {

			},
			scroll() {
				conosle.log(111)
			}
		},
	}
</script>

<style lang="scss" scoped>
	img[lazy=loading] {
		width: 40px;
		height: 300px;
		margin: auto;
		background-image: url(http://47.98.119.130/test/img/loding.gif);
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}
	.container {
		/*overflow: scroll;*/
		.list {
			display: flex;
			flex-flow: wrap;
			justify-content: center;
			.item {
				border: 1px solid rgba(0, 0, 0, 0.2);
				width: 320px;
				margin: 0 25px 30px;
				border-radius: 4px;
				overflow: hidden;
				.img-content {
					width: 320px;
					height: 320px;
					margin-bottom: 15px;
					overflow: hidden;
					img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				.goods-info {
					display: flex;
					flex-direction: column;
					font-size: 0;
					padding: 0 15px;
					.title {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 100%;
						height: 44px;
						margin-bottom: 20px;
						line-height: 44px;
						color: #4a4a4a;
						font-size: 32px;
					}
					.brief {
						overflow: hidden;
						height: 68px;
						margin-bottom: 20px;
						color: #9b9b9b;
						font-size: 24px;
						line-height: 34px;
					}
					.price {
						font-size: 24px;
						color: #EF364E;
					}
				}
				.lable {
					height: 34px;
					padding: 3px 12px;
				}
			}
		}
	}
</style>